import { ref,computed,watch } from 'vue'
import { useWindowSize,throttledWatch  } from '@vueuse/core'

export default function(){
  function setHtmlFontSize(){
    document.documentElement.style.fontSize=scale.value*rootValue.value+'px'
  }
  function rem2px(rem){
    const px=ref(0)
    px.value=rem*scale.value*rootValue.value
    return px
  }
  function px2rem(px){
    const rem=ref(0)
    rem.value=scale.value*(px/rootValue.value)
    return rem
  }
  const rootValue=ref(16)
  const designWidth=ref(750)
  const { width } = useWindowSize()
  const scale=computed(() => width.value/designWidth.value)
  throttledWatch(width,setHtmlFontSize,{ 
    throttle: 1000 
  })
  setHtmlFontSize()
  return {
    rootValue,designWidth,rem2px,px2rem,setHtmlFontSize
  }
}